<template>
  <div class="LeftTop">
    <div class="StringBox">
      <div class="toprightone">
        <div></div>
        <div>发展投入概览</div>
        <div></div>
        <div>...</div>
      </div>
    </div>
    <div class="TopContent">
      <div class="TopChidren">
        <div class="fazhan">发展总投入</div>
        <span class="yuan">
          <i
            style="color: #fff; margin-left: 6px;margin-top:5px"
            class="el-icon-s-order"
          ></i>
        </span>
        <div class="jihua">计划值（亿元）</div>
        <div class="qian">151.72</div>
      </div>
      <div class="TopChidren">
        <div class="fazhan">固定资产投资</div>
        <span class="yuan">
          <i
            style="color: #fff; margin-left: 6px;margin-top:5px"
            class="el-icon-s-order"
          ></i>
        </span>
        <div class="jihua">计划值（亿元）</div>
        <div class="qian">133.75</div>
      </div>
      <div class="TopChidren">
        <div class="fazhan">成本总投入</div>
        <span class="yuan">
          <i
            style="color: #fff; margin-left: 6px;margin-top:5px"
            class="el-icon-s-order"
          ></i>
        </span>
        <div class="jihua">计划值（亿元）</div>
        <div class="qian">13.81</div>
      </div>
      <div class="TopChidren">
        <div class="fazhan">股权投资</div>
        <span class="yuan">
          <i
            style="color: #fff; margin-left: 6px;margin-top:5px"
            class="el-icon-s-order"
          ></i>
        </span>
        <div class="jihua">计划值（亿元）</div>
        <div class="qian">4.17</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.LeftTop {
  position: relative;
  width: 510px;
  height: 268px;
  border: solid 1px #ccc;
  background: #ffff;
  .StringBox {
    width: 86%;
    margin-left: 10%;
    display: flex;
    .LeftString {
      margin-top: 22px;
      width: 35%;
      border-top: 1px solid #dbdbdb;
    }
    .font {
      // margin-top: 15px;
      width: 96px;
      height: 21px;
      font-size: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #595959;
      line-height: 21px;
      padding-top: 10px;
    }
    .RightString {
      margin-top: 22px;
      width: 35%;
      border-top: 1px solid #dbdbdb;
    }
    .toprightone {
      width: 510px;
      height: 26px;
      display: flex;
      // justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .toprightone > :nth-child(1) {
      width: 104px;
      height: 1px;
      margin-top: 15px;
      background: #d8d8d8;
    }
    .toprightone > :nth-child(3) {
      width: 104px;
      height: 1px;
      margin-top: 15px;
      background: #d8d8d8;
    }
    .toprightone > :nth-child(2) {
      line-height: 35px;
      margin: 0 40px;
      font-size: 16px;
      font-weight: bold;
      font-weight: 700;
    }
    .toprightone > :nth-child(4) {
      line-height: 7px;
      text-align: center;
      font-size: 15px;
      font-weight: bolder;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: solid 1px #ccc;
      position: absolute;
      right: 6px;
      top: 6px;
      color: #d3d3d3;
      //   background: #adadad;
      cursor: pointer;
      // z-index: 9999;
    }
  }
  .TopContent {
    width: 90%;
    height: 230px;
    // border: 1px solid red;
    margin: 0 auto;
    // margin-top: 2px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .TopChidren {
      overflow: hidden;
      width: 43%;
      height: 100px;
      border: 1px solid #c3c3c3;
      margin-top: 10px;
      position: relative;
      .fazhan {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        font-size: 20px;
        color: #c3c3c3;
      }
      .yuan {
        width: 30px;
        height: 30px;
        float: left;
        border-radius: 50%;
        background: #88c5ff;
        margin: -3px 0 12px 7px;
      }
      .jihua {
        position: absolute;
        left: 53px;
        top: 42px;
        // margin-left: 30px;
        // margin: 8px;
        font-size: 15px;
        color: #c3c3c3;
      }
      .qian {
        position: absolute;
        left: 63px;
        top: 65px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        // padding-left: 7px;
        // float: left;
        font-size: 16px;
        color: black;
      }
    }
  }
}
</style>
